<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
// Snapshot of real HTML written by Microsoft Excel to clipboard.
const kExcelMarkup = `
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file:///C:/Users/mockuser/AppData/Local/Temp/msohtmlclip1/01/clip.htm">
<link rel=File-List
href="file:///C:/Users/mockuser/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">
<style>
<!--table
	{mso-displayed-decimal-separator:"\.";
	mso-displayed-thousand-separator:"\,";}
@page
	{margin:.75in .7in .75in .7in;
	mso-header-margin:.3in;
	mso-footer-margin:.3in;}
tr
	{mso-height-source:auto;}
col
	{mso-width-source:auto;}
br
	{mso-data-placement:same-cell;}
td
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	mso-number-format:General;
	text-align:general;
	vertical-align:bottom;
	border:none;
	mso-background-source:auto;
	mso-pattern:auto;
	mso-protection:locked visible;
	white-space:nowrap;
	mso-rotate:0;}
.xl63
	{font-size:20.0pt;}
.xl64
	{font-weight:700;}
.xl65
	{font-style:italic;}
.xl66
	{text-decoration:underline;
	text-underline-style:single;}
.xl67
	{color:red;}
.xl68
	{background:yellow;
	mso-pattern:black none;}
-->
</style>
</head>

<body link="#0563C1" vlink="#954F72">

<table border=0 cellpadding=0 cellspacing=0 width=128 style='border-collapse:
 collapse;width:96pt'>
<!--StartFragment-->
 <col width=64 span=2 style='width:48pt'>
 <tr height=35 style='height:26.0pt'>
  <td height=35 class=xl63 width=64 style='height:26.0pt;width:48pt'>large</td>
  <td class=xl64 width=64 style='width:48pt'>bold</td>
 </tr>
 <tr height=19 style='height:14.5pt'>
  <td height=19 class=xl65 style='height:14.5pt'>italic</td>
  <td class=xl66>underline</td>
 </tr>
 <tr height=19 style='height:14.5pt'>
  <td height=19 class=xl67 style='height:14.5pt'>color</td>
  <td class=xl68>highlight</td>
 </tr>
<!--EndFragment-->
</table>

</body>

</html>
`;

document.oncopy = event => {
  event.clipboardData.setData('text/html', kExcelMarkup);
  event.preventDefault();
}

function parsePixelValue(str) {
  const parsed = CSSNumericValue.parse(str);
  assert_equals(parsed.unit, 'px');
  return parsed.value;
}
</script>

<p>Test passes if we can paste content from Excel with style preserved.</p>
<div id="target" contenteditable></div>
<script>
test(() => {
  target.focus();
  document.execCommand('copy');
  document.execCommand('paste');

  // Stylesheets in clipboard should have been stripped or turned into inline style
  assert_equals(document.styleSheets.length, 0);

  // large  bold
  // italic underline
  // color  highlight

  const cells = document.querySelectorAll('td');

  assert_approx_equals(
      parsePixelValue(getComputedStyle(cells[0]).fontSize),
      20 * 1.3333, // 20pt to pixels
      0.01);

  assert_equals(getComputedStyle(cells[1]).fontWeight, '700');
  assert_equals(getComputedStyle(cells[2]).fontStyle, 'italic');
  assert_equals(getComputedStyle(cells[3]).textDecorationLine, 'underline');
  assert_equals(getComputedStyle(cells[4]).color, 'rgb(255, 0, 0)');
  assert_equals(getComputedStyle(cells[5]).backgroundColor, 'rgb(255, 255, 0)');
}, 'Style on content pasted from Excel is preserved');
</script>
